<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>防汛通知</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#36CFC9',
                        danger: '#F53F3F',
                        neutral: '#F5F7FA',
                        dark: '#1D2129',
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .card-shadow {
                box-shadow: 0 10px 30px rgba(0, 0, 0, 0.07);
            }
            .hover-lift {
                transition: transform 0.2s ease, box-shadow 0.2s ease;
            }
            .hover-lift:hover {
                transform: translateY(-2px);
                box-shadow: 0 12px 35px rgba(0, 0, 0, 0.1);
            }
            .input-focus {
                @apply focus:ring-2 focus:ring-primary/30 focus:border-primary focus:outline-none transition-all;
            }
            .alert-message {
                @apply fixed top-4 right-4 bg-red-50 text-red-600 px-4 py-3 rounded-lg shadow-lg border border-red-100 transform translate-x-full transition-transform duration-300 flex items-center z-50;
            }
            .alert-show {
                @apply translate-x-0;
            }
            .time-option {
                @apply px-3 py-1.5 border border-gray-200 rounded-md cursor-pointer transition-all hover:border-primary hover:bg-primary/5;
            }
            .time-option.selected {
                @apply border-primary bg-primary/10 font-medium;
            }
        }
    </style>
</head>
<body class="bg-gradient-to-br from-gray-50 to-gray-100 min-h-screen font-inter text-dark">
    <!-- 提示消息 -->
    <div id="alertMessage" class="alert-message">
        <i class="fa fa-exclamation-circle mr-2"></i>
        <span>新增通知类目不能超过5个</span>
    </div>
    
    <div class="container mx-auto px-4 py-8 md:py-12 max-w-4xl">
        
        <!-- 主要内容区域 -->
        <main class="bg-white rounded-2xl p-6 md:p-8 card-shadow hover-lift mb-8">
            <form id="mainForm" class="space-y-8">
                <!-- 内容填写区域 -->
                <section class="space-y-6">
                    <h2 class="text-xl font-semibold flex items-center text-gray-800">
                        <span class="w-8 h-8 rounded-full bg-danger/10 flex items-center justify-center mr-3">
                            <i class="fa fa-file-text-o text-danger"></i>
                        </span>
                        防汛通知
                    </h2>
                    
                    <div class="space-y-5">
                        <div>
                            <label for="content" class="block text-sm font-medium text-gray-700 mb-1.5">任务通知</label>
                            <textarea 
                                id="content" 
                                rows="4" 
                                class="w-full px-4 py-3 border border-gray-200 rounded-xl input-focus"
                                placeholder="请输入防汛任务通知内容..."
                            ></textarea>
                        </div>
                        
                        <!-- 附件上传 -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1.5">附件上传</label>
                            <div class="flex items-center justify-center w-full">
                                <label for="file-upload" class="flex flex-col items-center justify-center w-full h-36 border-2 border-dashed border-gray-200 rounded-xl cursor-pointer bg-neutral hover:bg-gray-50 transition-all">
                                    <div class="flex flex-col items-center justify-center pt-5 pb-6">
                                        <i class="fa fa-cloud-upload text-3xl text-primary/70 mb-3"></i>
                                        <p class="mb-1 text-sm text-gray-600"><span class="font-semibold text-primary">点击上传</span> 或拖放文件</p>
                                        <p class="text-xs text-gray-400">支持 PDF, Word, Excel 等格式</p>
                                    </div>
                                    <input id="file-upload" type="file" class="hidden" multiple />
                                </label>
                            </div>
                            <div id="fileList" class="mt-3 space-y-2"></div>
                        </div>
                    </div>
                </section>
                
                <!-- 通知选项区域 -->
                <section class="space-y-6 pt-6 border-t border-gray-100">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                        
                        <!-- 是否发送短信 -->
                        <div class="flex items-center p-3 bg-gray-50 rounded-lg">
                            <input 
                                type="checkbox" 
                                id="sendSms" 
                                class="w-5 h-5 text-primary focus:ring-primary border-gray-300 rounded input-focus"
                                checked
                            >
                            <label for="sendSms" class="ml-3 text-gray-700">是否发送短信</label>
                        </div>
                        
                        <!-- 是否拨打电话（默认勾选） -->
                        <div class="flex items-center p-3 bg-gray-50 rounded-lg">
                            <input 
                                type="checkbox" 
                                id="makeCall" 
                                class="w-5 h-5 text-primary focus:ring-primary border-gray-300 rounded input-focus"
                                checked
                            >
                            <label for="makeCall" class="ml-3 text-gray-700">是否拨打电话</label>
                        </div>
                        
                        <!-- 是否追呼及时间设置 -->
                        <div class="flex flex-col p-3 bg-gray-50 rounded-lg">
                            <div class="flex items-center mb-2">
                                <input 
                                    type="checkbox" 
                                    id="callAgain" 
                                    class="w-5 h-5 text-primary focus:ring-primary border-gray-300 rounded input-focus"
                                    checked
                                >
                                <label for="callAgain" class="ml-3 text-gray-700">是否追呼</label>
                            </div>
                            
                            <div id="callAgainTimeContainer" class="ml-8 mt-2">
                                <div class="flex flex-wrap items-center gap-2">
                                    <label class="text-sm text-gray-600 mr-1">追呼时间：</label>
                                    <div class="time-option selected" data-time="10">10分钟</div>
                                    <div class="time-option" data-time="20">20分钟</div>
                                    <div class="time-option" data-time="30">30分钟</div>
                                    <input 
                                        type="hidden" 
                                        id="callAgainTime" 
                                        value="10"
                                    >
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 通知范围（直接展示，去掉复选框） -->
                    <div class="p-4 bg-gray-50 rounded-lg border border-primary/10">
                        <label class="text-gray-700 font-medium">通知范围</label>
                    </div>
                    
                    <!-- 单位列表 (直接展示) -->
                    <div id="unitsListSection" class="ml-6">
                        <div class="p-4 bg-white rounded-lg border border-gray-200">
                            <div class="flex justify-between items-center mb-3">
                                <h3 class="text-sm font-medium text-gray-700">选择通知单位：</h3>
                                <button 
                                    type="button" 
                                    id="selectAllUnits" 
                                    class="text-sm text-primary hover:text-primary/80 transition-colors flex items-center"
                                >
                                    <i class="fa fa-check-square-o mr-1"></i> 选择所有单位
                                </button>
                            </div>
                            <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-3">
                                <!-- 单位选项 -->
                                <div class="flex items-center">
                                    <input type="checkbox" id="unit1" class="w-4 h-4 text-primary input-focus unit-checkbox">
                                    <label for="unit1" class="ml-2 text-sm text-gray-700">气象局</label>
                                </div>
                                <div class="flex items-center">
                                    <input type="checkbox" id="unit2" class="w-4 h-4 text-primary input-focus unit-checkbox">
                                    <label for="unit2" class="ml-2 text-sm text-gray-700">园林局</label>
                                </div>
                                <div class="flex items-center">
                                    <input type="checkbox" id="unit3" class="w-4 h-4 text-primary input-focus unit-checkbox">
                                    <label for="unit3" class="ml-2 text-sm text-gray-700">公安分局</label>
                                </div>
                                <div class="flex items-center">
                                    <input type="checkbox" id="unit4" class="w-4 h-4 text-primary input-focus unit-checkbox">
                                    <label for="unit4" class="ml-2 text-sm text-gray-700">交通支队</label>
                                </div>
                                <div class="flex items-center">
                                    <input type="checkbox" id="unit5" class="w-4 h-4 text-primary input-focus unit-checkbox">
                                    <label for="unit5" class="ml-2 text-sm text-gray-700">应急局</label>
                                </div>
                                <div class="flex items-center">
                                    <input type="checkbox" id="unit6" class="w-4 h-4 text-primary input-focus unit-checkbox">
                                    <label for="unit6" class="ml-2 text-sm text-gray-700">统计局</label>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
                
                <!-- 通知类目列表区域 (直接展示) -->
                <section id="dataItemsSection" class="space-y-6 pt-6 border-t border-gray-100">
                    <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
                        <h2 class="text-xl font-semibold flex items-center text-gray-800">
                            <span class="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center mr-3">
                                <i class="fa fa-tags text-primary"></i>
                            </span>
                            通知类目
                            <span class="ml-2 text-sm text-gray-500 font-normal">(最多5项)</span>
                        </h2>
                        <button 
                            type="button" 
                            id="addItemBtn" 
                            class="flex items-center px-4 py-2.5 bg-primary text-white rounded-lg hover:bg-primary/90 transition-all shadow-sm"
                        >
                            <i class="fa fa-plus mr-2"></i>新增类目
                        </button>
                    </div>
                    
                    <!-- 通知类目列表容器 -->
                    <div id="dataItemsContainer" class="space-y-3">
                        <!-- 类目项将通过JS动态添加 -->
                    </div>
                </section>
                
                <!-- 提交按钮 -->
                <div class="pt-4 flex justify-end">
                    <button 
                        type="submit" 
                        class="px-6 py-3 bg-danger text-white rounded-lg hover:bg-danger/90 transition-all shadow-sm flex items-center hover-lift"
                    >
                        <i class="fa fa-send mr-2"></i>发布通知
                    </button>
                </div>
            </form>
        </main>
    </div>
    
    <script>
        // 等待DOM加载完成
        document.addEventListener('DOMContentLoaded', function() {
            // 获取DOM元素
            const dataItemsSection = document.getElementById('dataItemsSection');
            const dataItemsContainer = document.getElementById('dataItemsContainer');
            const addItemBtn = document.getElementById('addItemBtn');
            const fileUpload = document.getElementById('file-upload');
            const fileList = document.getElementById('fileList');
            const mainForm = document.getElementById('mainForm');
            const callAgainCheckbox = document.getElementById('callAgain');
            const callAgainTimeContainer = document.getElementById('callAgainTimeContainer');
            const callAgainTimeInput = document.getElementById('callAgainTime');
            const timeOptions = document.querySelectorAll('.time-option');
            const unitsListSection = document.getElementById('unitsListSection');
            const alertMessage = document.getElementById('alertMessage');
            const selectAllUnitsBtn = document.getElementById('selectAllUnits');
            const unitCheckboxes = document.querySelectorAll('.unit-checkbox');
            
            // 类目项计数器和最大限制
            let itemCount = 0;
            const MAX_ITEMS = 5;
            
            // 页面加载时添加一个初始类目
            addDataItem();
            
            // 追呼时间选项点击事件
            timeOptions.forEach(option => {
                option.addEventListener('click', function() {
                    // 移除其他选项的选中状态
                    timeOptions.forEach(opt => opt.classList.remove('selected'));
                    // 添加当前选项的选中状态
                    this.classList.add('selected');
                    // 更新隐藏输入框的值
                    callAgainTimeInput.value = this.dataset.time;
                });
            });
            
            // 监听"是否追呼"复选框变化
            callAgainCheckbox.addEventListener('change', function() {
                if (this.checked) {
                    // 显示追呼时间设置
                    callAgainTimeContainer.classList.remove('hidden');
                } else {
                    // 隐藏追呼时间设置
                    callAgainTimeContainer.classList.add('hidden');
                }
            });
            
            // 监听"选择所有单位"按钮点击
            selectAllUnitsBtn.addEventListener('click', function() {
                // 检查是否所有单位都已选中
                const allChecked = Array.from(unitCheckboxes).every(checkbox => checkbox.checked);
                
                // 全选或取消全选
                unitCheckboxes.forEach(checkbox => {
                    checkbox.checked = !allChecked;
                });
                
                // 更新按钮文本
                if (allChecked) {
                    selectAllUnitsBtn.innerHTML = '<i class="fa fa-check-square-o mr-1"></i> 选择所有单位';
                } else {
                    selectAllUnitsBtn.innerHTML = '<i class="fa fa-square-o mr-1"></i> 取消全选';
                }
            });
            
            // 监听单位复选框变化，更新全选按钮状态
            unitCheckboxes.forEach(checkbox => {
                checkbox.addEventListener('change', function() {
                    const allChecked = Array.from(unitCheckboxes).every(cb => cb.checked);
                    
                    if (allChecked) {
                        selectAllUnitsBtn.innerHTML = '<i class="fa fa-square-o mr-1"></i> 取消全选';
                    } else {
                        selectAllUnitsBtn.innerHTML = '<i class="fa fa-check-square-o mr-1"></i> 选择所有单位';
                    }
                });
            });
            
            // 监听"新增类目"按钮点击
            addItemBtn.addEventListener('click', function() {
                if (itemCount < MAX_ITEMS) {
                    addDataItem();
                } else {
                    // 显示提示消息
                    showAlert();
                }
            });
            
            // 监听文件上传变化
            fileUpload.addEventListener('change', handleFileUpload);
            
            // 监听表单提交
            mainForm.addEventListener('submit', function(e) {
                e.preventDefault();
                submitForm();
            });
            
            // 添加类目项函数
            function addDataItem() {
                if (itemCount >= MAX_ITEMS) return;
                
                itemCount++;
                
                // 创建类目项元素
                const itemDiv = document.createElement('div');
                itemDiv.className = 'flex items-center p-4 border border-gray-200 rounded-lg bg-gray-50 hover:shadow-sm transition-all';
                itemDiv.dataset.itemId = itemCount;
                itemDiv.style.opacity = '0';
                itemDiv.style.transform = 'translateY(10px)';
                
                // 设置类目项HTML内容
                itemDiv.innerHTML = `
                    <div class="flex-1 mr-4">
                        <input 
                            type="text" 
                            name="dataItem${itemCount}" 
                            placeholder="请输入通知类目内容..." 
                            class="w-full px-3 py-2 border border-gray-200 rounded-lg input-focus"
                        >
                    </div>
                    <button 
                        type="button" 
                        class="delete-item p-2 text-gray-400 hover:text-red-500 transition-all rounded-full hover:bg-red-50"
                    >
                        <i class="fa fa-trash-o"></i>
                    </button>
                `;
                
                // 添加删除按钮事件监听
                const deleteBtn = itemDiv.querySelector('.delete-item');
                deleteBtn.addEventListener('click', function() {
                    // 添加删除动画
                    itemDiv.style.opacity = '0';
                    itemDiv.style.transform = 'translateY(10px)';
                    setTimeout(() => {
                        itemDiv.remove();
                        itemCount--;
                    }, 200);
                });
                
                // 添加到容器并添加动画效果
                dataItemsContainer.appendChild(itemDiv);
                // 触发重排后添加动画
                setTimeout(() => {
                    itemDiv.style.transition = 'opacity 0.3s ease, transform 0.3s ease';
                    itemDiv.style.opacity = '1';
                    itemDiv.style.transform = 'translateY(0)';
                }, 10);
            }
            
            // 处理文件上传
            function handleFileUpload() {
                fileList.innerHTML = ''; // 清空现有列表
                
                // 遍历选中的文件
                for (let i = 0; i < this.files.length; i++) {
                    const file = this.files[i];
                    const fileSize = (file.size / 1024).toFixed(1);
                    
                    // 创建文件信息元素
                    const fileItem = document.createElement('div');
                    fileItem.className = 'flex items-center justify-between p-3 bg-gray-50 rounded-lg border border-gray-200 transition-all hover:shadow-sm';
                    fileItem.innerHTML = `
                        <div class="flex items-center">
                            <i class="fa fa-file-o text-primary mr-3"></i>
                            <div>
                                <p class="text-sm font-medium truncate max-w-[200px] md:max-w-[400px]">${file.name}</p>
                                <p class="text-xs text-gray-500">${fileSize} KB</p>
                            </div>
                        </div>
                        <button type="button" class="remove-file p-1.5 text-gray-400 hover:text-red-500 transition-all rounded-full hover:bg-red-50">
                            <i class="fa fa-times"></i>
                        </button>
                    `;
                    
                    // 添加删除文件事件
                    const removeBtn = fileItem.querySelector('.remove-file');
                    removeBtn.addEventListener('click', function() {
                        fileItem.remove();
                    });
                    
                    fileList.appendChild(fileItem);
                }
            }
            
            // 显示提示消息
            function showAlert() {
                alertMessage.classList.add('alert-show');
                
                // 3秒后隐藏提示
                setTimeout(() => {
                    alertMessage.classList.remove('alert-show');
                }, 3000);
            }
            
            // 表单提交处理
            function submitForm() {
                // 收集表单数据
                const formData = {
                    taskNotification: document.getElementById('content').value,
                    sendSms: document.getElementById('sendSms').checked,
                    makeCall: document.getElementById('makeCall').checked,
                    callAgain: callAgainCheckbox.checked,
                    callAgainTime: callAgainCheckbox.checked ? callAgainTimeInput.value : null,
                    selectedUnits: [],
                    dataItems: []
                };
                
                // 收集选中的单位
                const unitCheckboxes = unitsListSection.querySelectorAll('input[type="checkbox"]:checked');
                unitCheckboxes.forEach(checkbox => {
                    formData.selectedUnits.push(checkbox.nextElementSibling.textContent);
                });
                
                // 收集通知类目
                const inputs = dataItemsContainer.querySelectorAll('input');
                inputs.forEach(input => {
                    if (input.value.trim()) {
                        formData.dataItems.push(input.value.trim());
                    }
                });
                
                // 显示提交结果
                console.log('表单提交数据:', formData);
                alert('防汛通知发布成功！\n\n' + JSON.stringify(formData, null, 2));
            }
        });
    </script>
</body>
</html>
